<script setup lang="ts">
import { onMounted, ref } from "vue";
import CustomIcon from "@/components/framework/icon";
import { useIpcListener } from "@/framework/ipc";
import type { WindowStateChangeArgs } from "@common/window-ipc";
import { useAppStore } from "@/store/app-store";

const appName = import.meta.env.VITE_APP_NAME;

// 窗口状态
const isMaximized = ref(false);
onMounted(() => ipc.invoke("window:get-state").then((state: WindowStateChangeArgs) => (isMaximized.value = state.maximized)));
useIpcListener("window:state-changed", (state: WindowStateChangeArgs) => (isMaximized.value = state.maximized));

const minimize = () => ipc.send("window:minimize");
const toggleMaximizeState = () => (isMaximized.value ? ipc.send("window:unmaximize") : ipc.send("window:maximize"));
const closeWindow = () => ipc.send("window:close");
// 窗口状态 END

const appStore = useAppStore();
</script>

<template>
  <header class="titlebar">
    <div class="titlebar-left">
      <div class="app-logo">
        <img src="/static/image/logo.svg" alt="开发者环境管理" />
      </div>
      <div class="app-name">
        <span>{{ appName }}</span>
      </div>
      <div v-if="appStore.secondTitle">
        <span class="font-12"> - {{ appStore.secondTitle }}</span>
      </div>
    </div>
    <div class="titlebar-right">
      <div class="r-btn" @click="minimize">
        <CustomIcon type="icon-minus" />
      </div>
      <div class="r-btn" @click="toggleMaximizeState">
        <CustomIcon :type="isMaximized ? 'icon-unmaximize' : 'icon-maximize'" />
      </div>
      <div class="r-btn btn-close-app" @click="closeWindow">
        <CustomIcon type="icon-close" />
      </div>
    </div>
    <span class="titlebar-resizer" />
  </header>
</template>

<style lang="less">
.titlebar {
  position: relative;
  box-sizing: border-box;
  height: var(--titlebar-height);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  -webkit-app-region: drag;
  user-select: none;
  box-shadow: 6px 0 5px 0 rgba(162, 162, 162, 0.31);
  background-color: var(--titlebar-bg-color);
  color: #fff;

  > div {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    height: var(--titlebar-height);
    flex: 1;
  }

  &-left {
    > div {
      margin-left: 8px;
      height: var(--titlebar-height);
      line-height: var(--titlebar-height);
    }

    .app-logo {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 20px;
      width: 20px;

      > img {
        height: 100%;
        width: 100%;
      }
    }

    .app-name {
      font-size: 13px;
      letter-spacing: 0.8px;
      margin-left: 8px;
      color: var(--text-color);
    }
  }

  &-right {
    display: flex;
    justify-content: flex-end;

    > div {
      -webkit-app-region: no-drag;
      height: 100%;
      min-width: var(--titlebar-height);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      padding: 0 10px;

      &.r-btn:hover {
        //background-color: rgba(#000, 0.1);
        background-color: var(--color-bg-text-hover);
        color: var(--text-color);
      }

      &.btn-close-app {
        &:hover {
          background-color: var(--error-color);

          .anticon {
            color: #fff !important;
            fill: #fff !important;
          }
        }
      }

      .anticon {
        transition: all 0.2s;
        font-size: 12px;
        color: var(--text-color);
      }
    }
  }
}

.titlebar-resizer {
  -webkit-app-region: no-drag;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 2px;
  cursor: ns-resize;
}
</style>
